<template>
    <div class="f-root">
        <div class="top">
            <a href='https://buy.duitang.com/buy/subCategory/?category_id=6&title=%E5%B1%85%E5%AE%B6&spu_name=inv_%E5%AE%B6%E5%B1%85&__urlopentype=pageweb&spm=b1' class="top1">
                <span class="liang">
                    <img src='../assets/img/jujia.png'>
                </span>
                <br>
                <span class="bb">居家</span>
            </a>
            <a href="https://buy.duitang.com/buy/subCategory/?category_id=1&title=%E6%8A%A4%E8%82%A4&spu_name=inv_%E6%8A%A4%E8%82%A4&__urlopentype=pageweb&spm=b1" class='top1'>
                <span class="shang">
                    <img src='../assets/img/hufu.png'>
                </span>
                <br>
                <span class="bb">护肤</span>
            </a>
            <a href="/" class='top1'>
                <span class="mei">
                    <img src='../assets/img/caizhuang.png'>
                </span>
                <br>
                <span class="bb">彩妆</span>
            </a>
            <a href="/" class='top1'>
                <span class="jia">
                    <img src='../assets/img/gerenhuli.png'>
                </span>
                <br>
                <span class="bb">个人护理</span>
            </a>
        </div>
        <div class="bottom">
            <a href="/" class="bot1">
                <span class='bi'>
                    <img src='../assets/img/meishi.png'>
                </span>
                <br>
                <span class="bb">美食</span>
            </a>
            <a href="/" class='bot1'>
                <span class='tou'>
                    <img src='../assets/img/wenju.png'>
                </span>
                <br>
                <span class="bb">文具手帐</span>
            </a>
            <a href="/" class='bot1'>
                <span class='biao'>
                    <img src='../assets/img/danpin.png'>
                </span>
                <br>
                <span class="bb">畅销单品</span>
            </a>
            <router-link :to="'/more'" class='bot1'>
                <span class='biao'>
                    <img src='../assets/img/quanbu.png'>
                </span>
                <br>
                <span class="bb fen">全部分类</span>
            </router-link>
        </div>
    </div>
</template>

<script>
import Gengduo from './Gengduo'
export default {
    components:{
        Gengduo
    },
    props:['']
}
</script>

<style scoped>
.bb {
    font-size: 12px;
    color: #818181;
}

.top {
    display: flex;
    justify-content: space-between;
    background-color: #FDFDFD;
}

.top1 {
    flex-basis: 25%;
    box-sizing: border-box;
    padding: 20px 10px 10px 10px;
    height: 80px;
    text-align: center;
    line-height: 25px;
}

.liang {
    width: 34px;
    height: 34px;
    padding-bottom:-5px; 
}

.liang img {
    width: 28px;
    height: 28px;
}
.shang {
    width: 34px;
    height: 34px;
}

.shang img {
    width: 28px;
    height: 28px;
}
.mei {
    width: 34px;
    height: 34px;
}

.mei img {
    width: 28px;
    height: 28px;
}
.jia {
    width: 34px;
    height: 34px;
}

.jia img {
    width: 28px;
    height: 28px;
}
.fa-shopping-bag {
    font-size: 34px;
    color: #F1C40F;
}

.bottom {
    display: flex;
    justify-content: space-between;
}

.bot1 {
    height: 80px;
    flex-basis: 25%;
    box-sizing: border-box;
    padding: 20px 10px 10px 10px;
    text-align: center;
    background-color: white;
}

.bi {
    width: 34px;
    height: 34px;
}

.bi img {
    width: 28px;
    height: 28px;
}

.tou {
    width: 34px;
    height: 34px;
}

.tou img {
    width: 28px;
    height: 28px;
}

.biao {
    width: 34px;
    height: 34px;
}

.biao img {
    width: 28px;
    height: 28px;
}

.fa-list-ul {
    font-size: 32px;
    color: #3799DB;
}

.fen {
    padding-bottom: 3px;
}
</style>
